<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ASS字幕特效编辑器</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial,
          sans-serif;
      }

      :root {
        --primary-bg: #e6e7ee;
        --secondary-bg: #ffffff;
        --shadow-light: #ffffff;
        --shadow-dark: #d1d9e6;
        --accent-color: #667eea;
        --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-color: #4ecdc4;
        --danger-color: #ff6b6b;
        --warning-color: #feca57;
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --glass-bg: rgba(255, 255, 255, 0.25);
        --glass-border: rgba(255, 255, 255, 0.18);
      }

      body {
        background: var(--primary-bg);
        color: var(--text-primary);
        min-height: 100vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s ease;
        animation: pageLoad 0.8s ease;
      }

      @keyframes pageLoad {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .container {
        width: 100%;
        max-width: 1400px;
        background: var(--primary-bg);
        border-radius: 30px;
        padding: 40px;
        box-shadow: 20px 20px 60px var(--shadow-dark),
          -20px -20px 60px var(--shadow-light);
        margin-top: 20px;
        transition: all 0.3s ease;
        animation: containerFloat 1s ease 0.2s both;
      }

      @keyframes containerFloat {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .container:hover {
        box-shadow: 25px 25px 70px var(--shadow-dark),
          -25px -25px 70px var(--shadow-light);
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px;
        background: var(--primary-bg);
        border-radius: 25px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: headerSlide 0.8s ease 0.4s both;
      }

      @keyframes headerSlide {
        from {
          opacity: 0;
          transform: translateY(-30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      h1 {
        font-size: 3.2rem;
        margin-bottom: 15px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        animation: titleGlow 3s ease-in-out infinite alternate;
      }

      @keyframes titleGlow {
        from {
          filter: brightness(1);
        }
        to {
          filter: brightness(1.2);
        }
      }

      .subtitle {
        font-size: 1.3rem;
        color: var(--text-secondary);
        margin-bottom: 30px;
        font-weight: 500;
      }

      .panels {
        display: flex;
        gap: 30px;
        margin-bottom: 40px;
        animation: panelsSlide 0.8s ease 0.6s both;
      }

      @keyframes panelsSlide {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .panel {
        flex: 1;
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        transition: left 0.8s;
      }

      .panel:hover::before {
        left: 100%;
      }

      .panel:hover {
        transform: translateY(-5px);
        box-shadow: 16px 16px 32px var(--shadow-dark),
          -16px -16px 32px var(--shadow-light);
      }

      .panel-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
        color: var(--accent-color);
        display: flex;
        align-items: center;
        font-weight: 600;
      }

      .panel-title::before {
        content: attr(data-icon);
        margin-right: 12px;
        font-size: 1.8rem;
        animation: iconBounce 2s ease-in-out infinite;
      }

      @keyframes iconBounce {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }

      .file-upload {
        border: 3px dashed var(--accent-color);
        border-radius: 25px;
        padding: 50px 40px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 25px;
        cursor: pointer;
        background: var(--primary-bg);
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      .file-upload:hover {
        border-color: var(--success-color);
        transform: translateY(-5px) scale(1.02);
        box-shadow: inset 10px 10px 20px var(--shadow-dark),
          inset -10px -10px 20px var(--shadow-light),
          0 15px 40px rgba(102, 126, 234, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .file-upload.dragover {
        border-color: var(--success-color);
        background: rgba(78, 205, 196, 0.05);
        transform: scale(1.05);
        box-shadow: inset 12px 12px 24px var(--shadow-dark),
          inset -12px -12px 24px var(--shadow-light),
          0 20px 50px rgba(78, 205, 196, 0.3);
        animation: dragPulse 1s ease-in-out infinite;
      }

      @keyframes dragPulse {
        0%,
        100% {
          border-color: var(--success-color);
        }
        50% {
          border-color: var(--accent-color);
        }
      }

      .file-upload-content {
        position: relative;
        z-index: 1;
      }

      .file-upload-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
        display: block;
        animation: iconFloat 3s ease-in-out infinite;
        filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
      }

      @keyframes iconFloat {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      .file-upload-text {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 10px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .file-upload-subtext {
        font-size: 1.1rem;
        color: var(--text-secondary);
        margin-bottom: 20px;
        font-weight: 500;
      }

      .file-upload-formats {
        font-size: 0.9rem;
        color: var(--accent-color);
        font-weight: 500;
        padding: 8px 16px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 20px;
        display: inline-block;
        margin-bottom: 20px;
      }

      .file-upload input[type='file'] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
      }

      .subtitle-info {
        background: var(--primary-bg);
        border-radius: 15px;
        padding: 20px;
        margin-top: 20px;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
      }

      .subtitle-info h4 {
        color: var(--accent-color);
        margin-bottom: 10px;
        font-size: 1.1rem;
      }

      .subtitle-info p {
        color: var(--text-secondary);
        margin-bottom: 8px;
        font-size: 0.95rem;
      }

      .form-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 10px;
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.95rem;
      }

      input,
      select,
      textarea {
        width: 100%;
        padding: 14px 18px;
        background: var(--primary-bg);
        border: none;
        border-radius: 15px;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 500;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
        transition: all 0.3s ease;
      }

      input:focus,
      select:focus,
      textarea:focus {
        outline: none;
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light),
          0 0 0 3px rgba(102, 126, 234, 0.2);
      }

      button {
        background: var(--primary-bg);
        color: var(--text-primary);
        border: none;
        padding: 14px 28px;
        border-radius: 15px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 1rem;
        flex-shrink: 0;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s;
      }

      button:hover::before {
        left: 100%;
      }

      button:hover {
        transform: translateY(-3px);
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
      }

      button:active {
        transform: translateY(0);
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
      }

      button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
      }

      .btn-primary {
        background: var(--accent-gradient);
        color: white;
        padding: 16px 32px;
        font-size: 1.1rem;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .btn-primary:hover {
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 0 30px rgba(102, 126, 234, 0.3);
      }

      .btn-success {
        background: linear-gradient(
          135deg,
          var(--success-color) 0%,
          #44a08d 100%
        );
        color: white;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .editor-container {
        display: none;
        margin-top: 30px;
        animation: editorSlide 0.8s ease;
      }

      @keyframes editorSlide {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .subtitle-list {
        max-height: 600px;
        overflow-y: auto;
        background: var(--primary-bg);
        border-radius: 20px;
        padding: 20px;
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light);
      }

      .subtitle-item {
        background: var(--primary-bg);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .subtitle-item:hover {
        transform: translateY(-2px);
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
      }

      .subtitle-item.active {
        border: 2px solid var(--accent-color);
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          0 0 0 3px rgba(102, 126, 234, 0.2);
      }

      .subtitle-time {
        font-size: 0.9rem;
        color: var(--accent-color);
        font-weight: 600;
        margin-bottom: 8px;
      }

      .subtitle-text {
        font-size: 1.1rem;
        color: var(--text-primary);
        line-height: 1.5;
        margin-bottom: 10px;
      }

      .subtitle-preview {
        padding: 15px;
        background: #000;
        border-radius: 10px;
        margin-top: 10px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .style-controls {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
      }

      .color-input {
        width: 60px !important;
        height: 40px;
        padding: 0;
        border-radius: 10px;
        cursor: pointer;
      }

      .range-input {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: var(--primary-bg);
        outline: none;
        box-shadow: inset 3px 3px 6px var(--shadow-dark),
          inset -3px -3px 6px var(--shadow-light);
      }

      .range-input::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent-gradient);
        cursor: pointer;
        box-shadow: 2px 2px 4px var(--shadow-dark),
          -2px -2px 4px var(--shadow-light);
      }

      .actions {
        display: flex;
        justify-content: center;
        gap: 25px;
        margin-top: 30px;
        animation: actionsSlide 0.8s ease 1s both;
      }

      @keyframes actionsSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .status-message {
        min-height: 35px;
        margin: 20px 0;
        color: var(--accent-color);
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        text-align: center;
      }

      .error-message {
        color: var(--danger-color);
        margin: 20px 0;
        min-height: 35px;
        font-weight: 600;
        font-size: 1.1rem;
        animation: errorShake 0.5s ease;
        text-align: center;
      }

      @keyframes errorShake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
      }

      @media (max-width: 768px) {
        .panels {
          flex-direction: column;
        }

        .container {
          padding: 20px;
        }

        h1 {
          font-size: 2.5rem;
        }

        .style-controls {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>✨ ASS字幕特效编辑器</h1>
        <p class="subtitle">
          上传ASS字幕文件，自定义每句字幕的特效和样式
        </p>
      </header>

      <!-- 文件上传面板 -->
      <div class="panel">
        <div class="panel-title" data-icon="📝">ASS字幕上传</div>

        <div class="file-upload" id="assUploadArea">
          <div class="file-upload-content">
            <span class="file-upload-icon">📄</span>
            <div class="file-upload-text">点击或拖拽上传ASS字幕</div>
            <div class="file-upload-subtext">支持 .ass 格式字幕文件</div>
            <div class="file-upload-formats">Advanced SubStation Alpha</div>
            <input type="file" id="assInput" accept=".ass" />
          </div>
        </div>

        <div class="subtitle-info" id="assInfo" style="display: none">
          <h4>字幕文件信息</h4>
          <p id="assFileName">文件名: -</p>
          <p id="assFileSize">文件大小: -</p>
          <p id="assLineCount">字幕条数: -</p>
          <p id="assStyleCount">样式数量: -</p>
        </div>
      </div>

      <!-- 编辑器容器 -->
      <div class="editor-container" id="editorContainer">
        <div class="panels">
          <!-- 字幕列表面板 -->
          <div class="panel" style="flex: 1.5">
            <div class="panel-title" data-icon="📋">字幕列表</div>
            <div class="subtitle-list" id="subtitleList">
              <!-- 字幕项目将在这里动态生成 -->
            </div>
          </div>

          <!-- ASS特效说明面板 -->
          <div class="panel" style="margin-bottom: 20px;">
            <div class="panel-title" data-icon="📖">ASS特效说明</div>
            <div class="effects-help" style="max-height: 300px; overflow-y: auto; padding: 10px;">
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">🚀 移动效果</strong> - 字幕沿特定路径运动<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\move(), \pos()</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">✨ 淡入淡出</strong> - 字幕逐渐显现或消失<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\fad(), \fade()</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">🔍 缩放效果</strong> - 字幕放大或缩小<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\fscx, \fscy, \t()</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">🌀 旋转效果</strong> - 字幕绕特定轴旋转<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\frx, \fry, \frz, \fr()</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">🎤 卡拉OK效果</strong> - 歌词随演唱进度变色，常见于音乐视频<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\k, \K, \kf, \ko</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">🎨 颜色变换</strong> - 字幕颜色改变或渐变<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\c, \1c, \2c, \3c, \4c</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">💫 模糊与透明度</strong> - 调整字幕模糊程度和透明度<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\blur, \alpha, \1a, \2a, \3a, \4a</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">✂️ 裁剪效果</strong> - 显示或隐藏字幕的特定部分<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">\clip(), \iclip()</code>
              </div>
              <div class="help-item" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
                <strong style="color: var(--primary-color);">📐 绘制图形</strong> - 使用矢量图形指令绘制简单图形<br>
                <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em;">{\p1}...{\p0}</code>
              </div>
            </div>
          </div>

          <!-- 样式编辑面板 -->
          <div class="panel" style="flex: 1">
            <div class="panel-title" data-icon="🎨">样式编辑</div>
            <div id="styleEditor">
              <div class="form-group">
                <label>字幕文本</label>
                <textarea id="subtitleTextEditor" rows="3" placeholder="选择左侧字幕进行编辑"></textarea>
              </div>

              <div class="style-controls">
                <div class="form-group">
                  <label for="fontName">字体名称</label>
                  <input type="text" id="fontName" placeholder="Arial" />
                </div>

                <div class="form-group">
                  <label for="fontSize">字体大小</label>
                  <input type="range" id="fontSize" class="range-input" min="12" max="72" value="24" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="fontSizeValue">24</span> px
                  </div>
                </div>

                <div class="form-group">
                  <label for="primaryColor">主要颜色</label>
                  <input type="color" id="primaryColor" class="color-input" value="#ffffff" />
                </div>

                <div class="form-group">
                  <label for="secondaryColor">次要颜色</label>
                  <input type="color" id="secondaryColor" class="color-input" value="#ff0000" />
                </div>

                <div class="form-group">
                  <label for="outlineColor">描边颜色</label>
                  <input type="color" id="outlineColor" class="color-input" value="#000000" />
                </div>

                <div class="form-group">
                  <label for="shadowColor">阴影颜色</label>
                  <input type="color" id="shadowColor" class="color-input" value="#808080" />
                </div>

                <div class="form-group">
                  <label for="bold">粗体</label>
                  <select id="bold">
                    <option value="0">否</option>
                    <option value="1">是</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="italic">斜体</label>
                  <select id="italic">
                    <option value="0">否</option>
                    <option value="1">是</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="underline">下划线</label>
                  <select id="underline">
                    <option value="0">否</option>
                    <option value="1">是</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="strikeout">删除线</label>
                  <select id="strikeout">
                    <option value="0">否</option>
                    <option value="1">是</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="outline">描边宽度</label>
                  <input type="range" id="outline" class="range-input" min="0" max="10" value="2" step="0.5" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="outlineValue">2</span> px
                  </div>
                </div>

                <div class="form-group">
                  <label for="shadow">阴影深度</label>
                  <input type="range" id="shadow" class="range-input" min="0" max="10" value="2" step="0.5" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="shadowValue">2</span> px
                  </div>
                </div>
              </div>

              <!-- 特效控制区域 -->
              <div class="panel-title" data-icon="✨" style="margin-top: 30px; margin-bottom: 20px;">特效控制</div>
              
              <div class="style-controls">
                <!-- 移动效果 -->
                <div class="form-group">
                  <label for="moveEffect">移动效果</label>
                  <select id="moveEffect">
                    <option value="none">无移动</option>
                    <option value="move">直线移动</option>
                    <option value="pos">固定位置</option>
                  </select>
                </div>

                <div class="form-group" id="moveControls" style="display: none;">
                  <label>移动参数 (x1,y1,x2,y2)</label>
                  <input type="text" id="moveParams" placeholder="100,100,500,100" />
                </div>

                <!-- 淡入淡出 -->
                <div class="form-group">
                  <label for="fadeEffect">淡入淡出</label>
                  <select id="fadeEffect">
                    <option value="none">无淡化</option>
                    <option value="fad">简单淡化</option>
                    <option value="fade">复杂淡化</option>
                  </select>
                </div>

                <div class="form-group" id="fadeControls" style="display: none;">
                  <label>淡化参数 (淡入时间,淡出时间)</label>
                  <input type="text" id="fadeParams" placeholder="500,500" />
                </div>

                <!-- 缩放效果 -->
                <div class="form-group">
                  <label for="scaleX">水平缩放 (%)</label>
                  <input type="range" id="scaleX" class="range-input" min="10" max="500" value="100" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="scaleXValue">100</span>%
                  </div>
                </div>

                <div class="form-group">
                  <label for="scaleY">垂直缩放 (%)</label>
                  <input type="range" id="scaleY" class="range-input" min="10" max="500" value="100" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="scaleYValue">100</span>%
                  </div>
                </div>

                <!-- 旋转效果 -->
                <div class="form-group">
                  <label for="rotateX">X轴旋转 (度)</label>
                  <input type="range" id="rotateX" class="range-input" min="-360" max="360" value="0" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="rotateXValue">0</span>°
                  </div>
                </div>

                <div class="form-group">
                  <label for="rotateY">Y轴旋转 (度)</label>
                  <input type="range" id="rotateY" class="range-input" min="-360" max="360" value="0" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="rotateYValue">0</span>°
                  </div>
                </div>

                <div class="form-group">
                  <label for="rotateZ">Z轴旋转 (度)</label>
                  <input type="range" id="rotateZ" class="range-input" min="-360" max="360" value="0" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="rotateZValue">0</span>°
                  </div>
                </div>

                <!-- 卡拉OK效果 -->
                <div class="form-group">
                  <label for="karaokeEffect">卡拉OK效果</label>
                  <select id="karaokeEffect">
                    <option value="none">无卡拉OK</option>
                    <option value="k">基础卡拉OK</option>
                    <option value="kf">填充卡拉OK</option>
                    <option value="ko">轮廓卡拉OK</option>
                  </select>
                </div>

                <div class="form-group" id="karaokeControls" style="display: none;">
                  <label>卡拉OK时间 (毫秒)</label>
                  <input type="number" id="karaokeTime" value="1000" min="100" max="10000" />
                </div>

                <!-- 模糊效果 -->
                <div class="form-group">
                  <label for="blurEffect">模糊强度</label>
                  <input type="range" id="blurEffect" class="range-input" min="0" max="10" value="0" step="0.1" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="blurValue">0</span>
                  </div>
                </div>

                <!-- 透明度 -->
                <div class="form-group">
                  <label for="alphaEffect">整体透明度</label>
                  <input type="range" id="alphaEffect" class="range-input" min="0" max="255" value="0" />
                  <div style="text-align: center; margin-top: 5px; font-size: 0.9rem; color: var(--text-secondary);">
                    <span id="alphaValue">0</span>
                  </div>
                </div>

                <!-- 裁剪效果 -->
                <div class="form-group">
                  <label for="clipEffect">裁剪效果</label>
                  <select id="clipEffect">
                    <option value="none">无裁剪</option>
                    <option value="clip">矩形裁剪</option>
                    <option value="iclip">反向裁剪</option>
                  </select>
                </div>

                <div class="form-group" id="clipControls" style="display: none;">
                  <label>裁剪区域 (x1,y1,x2,y2)</label>
                  <input type="text" id="clipParams" placeholder="0,0,100,100" />
                </div>

                <!-- 绘制模式 -->
                <div class="form-group">
                  <label for="drawingMode">绘制模式</label>
                  <select id="drawingMode">
                    <option value="0">文本模式</option>
                    <option value="1">绘制模式</option>
                  </select>
                </div>

                <div class="form-group" id="drawingControls" style="display: none;">
                  <label>绘制指令</label>
                  <textarea id="drawingCommands" rows="3" placeholder="m 0 0 l 100 0 l 100 100 l 0 100"></textarea>
                </div>
              </div>

              <!-- 预览区域 -->
              <div class="form-group">
                <label>效果预览</label>
                <div class="subtitle-preview" id="subtitlePreview">
                  <span id="previewText" style="color: white; font-size: 24px;">选择字幕查看预览</span>
                </div>
              </div>

              <div class="actions">
                <button type="button" id="applyStyleBtn" class="btn-primary">应用样式</button>
                <button type="button" id="resetStyleBtn">重置样式</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 状态消息 -->
      <div class="status-message" id="statusMessage"></div>
      <div class="error-message" id="errorMessage"></div>

      <!-- 操作按钮 -->
      <div class="actions">
        <button type="button" id="exportBtn" class="btn-success" style="display: none;">📥 导出ASS文件</button>
        <button type="button" id="resetBtn">🔄 重置</button>
      </div>
    </div>

    <script>
      // 全局变量
      let assData = null;
      let currentSubtitleIndex = -1;
      let subtitles = [];
      let styles = {};

      // DOM 元素
      const assInput = document.getElementById('assInput');
      const assUploadArea = document.getElementById('assUploadArea');
      const assInfo = document.getElementById('assInfo');
      const editorContainer = document.getElementById('editorContainer');
      const subtitleList = document.getElementById('subtitleList');
      const statusMessage = document.getElementById('statusMessage');
      const errorMessage = document.getElementById('errorMessage');
      const exportBtn = document.getElementById('exportBtn');
      const resetBtn = document.getElementById('resetBtn');

      // 样式编辑器元素
      const subtitleTextEditor = document.getElementById('subtitleTextEditor');
      const fontName = document.getElementById('fontName');
      const fontSize = document.getElementById('fontSize');
      const fontSizeValue = document.getElementById('fontSizeValue');
      const primaryColor = document.getElementById('primaryColor');
      const secondaryColor = document.getElementById('secondaryColor');
      const outlineColor = document.getElementById('outlineColor');
      const shadowColor = document.getElementById('shadowColor');
      const bold = document.getElementById('bold');
      const italic = document.getElementById('italic');
      const underline = document.getElementById('underline');
      const strikeout = document.getElementById('strikeout');
      const outline = document.getElementById('outline');
      const outlineValue = document.getElementById('outlineValue');
      const shadow = document.getElementById('shadow');
      const shadowValue = document.getElementById('shadowValue');
      const subtitlePreview = document.getElementById('subtitlePreview');
      const previewText = document.getElementById('previewText');
      const applyStyleBtn = document.getElementById('applyStyleBtn');
      const resetStyleBtn = document.getElementById('resetStyleBtn');

      // 特效控制元素
      const moveEffect = document.getElementById('moveEffect');
      const moveControls = document.getElementById('moveControls');
      const moveParams = document.getElementById('moveParams');
      const fadeEffect = document.getElementById('fadeEffect');
      const fadeControls = document.getElementById('fadeControls');
      const fadeParams = document.getElementById('fadeParams');
      const scaleX = document.getElementById('scaleX');
      const scaleXValue = document.getElementById('scaleXValue');
      const scaleY = document.getElementById('scaleY');
      const scaleYValue = document.getElementById('scaleYValue');
      const rotateX = document.getElementById('rotateX');
      const rotateXValue = document.getElementById('rotateXValue');
      const rotateY = document.getElementById('rotateY');
      const rotateYValue = document.getElementById('rotateYValue');
      const rotateZ = document.getElementById('rotateZ');
      const rotateZValue = document.getElementById('rotateZValue');
      const karaokeEffect = document.getElementById('karaokeEffect');
      const karaokeControls = document.getElementById('karaokeControls');
      const karaokeTime = document.getElementById('karaokeTime');
      const blurEffect = document.getElementById('blurEffect');
      const blurValue = document.getElementById('blurValue');
      const alphaEffect = document.getElementById('alphaEffect');
      const alphaValue = document.getElementById('alphaValue');
      const clipEffect = document.getElementById('clipEffect');
      const clipControls = document.getElementById('clipControls');
      const clipParams = document.getElementById('clipParams');
      const drawingMode = document.getElementById('drawingMode');
      const drawingControls = document.getElementById('drawingControls');
      const drawingCommands = document.getElementById('drawingCommands');

      // 初始化事件监听器
      function initEventListeners() {
        // 文件上传
        assInput.addEventListener('change', handleFileSelect);
        assUploadArea.addEventListener('dragover', handleDragOver);
        assUploadArea.addEventListener('drop', handleDrop);
        assUploadArea.addEventListener('dragleave', handleDragLeave);

        // 样式控制
        fontSize.addEventListener('input', () => {
          fontSizeValue.textContent = fontSize.value;
          updatePreview();
        });
        
        outline.addEventListener('input', () => {
          outlineValue.textContent = outline.value;
          updatePreview();
        });
        
        shadow.addEventListener('input', () => {
          shadowValue.textContent = shadow.value;
          updatePreview();
        });

        // 特效控制事件监听
        scaleX.addEventListener('input', () => {
          scaleXValue.textContent = scaleX.value;
          updatePreview();
        });
        
        scaleY.addEventListener('input', () => {
          scaleYValue.textContent = scaleY.value;
          updatePreview();
        });
        
        rotateX.addEventListener('input', () => {
          rotateXValue.textContent = rotateX.value;
          updatePreview();
        });
        
        rotateY.addEventListener('input', () => {
          rotateYValue.textContent = rotateY.value;
          updatePreview();
        });
        
        rotateZ.addEventListener('input', () => {
          rotateZValue.textContent = rotateZ.value;
          updatePreview();
        });
        
        blurEffect.addEventListener('input', () => {
          blurValue.textContent = blurEffect.value;
          updatePreview();
        });
        
        alphaEffect.addEventListener('input', () => {
          alphaValue.textContent = alphaEffect.value;
          updatePreview();
        });

        // 特效选择器变化监听
        moveEffect.addEventListener('change', () => {
          moveControls.style.display = moveEffect.value !== 'none' ? 'block' : 'none';
          updatePreview();
        });
        
        fadeEffect.addEventListener('change', () => {
          fadeControls.style.display = fadeEffect.value !== 'none' ? 'block' : 'none';
          updatePreview();
        });
        
        karaokeEffect.addEventListener('change', () => {
          karaokeControls.style.display = karaokeEffect.value !== 'none' ? 'block' : 'none';
          updatePreview();
        });
        
        clipEffect.addEventListener('change', () => {
          clipControls.style.display = clipEffect.value !== 'none' ? 'block' : 'none';
          updatePreview();
        });
        
        drawingMode.addEventListener('change', () => {
          drawingControls.style.display = drawingMode.value === '1' ? 'block' : 'none';
          updatePreview();
        });

        // 所有样式控件的变化监听
        [fontName, primaryColor, secondaryColor, outlineColor, shadowColor, bold, italic, underline, strikeout, moveParams, fadeParams, karaokeTime, clipParams, drawingCommands].forEach(element => {
          element.addEventListener('change', updatePreview);
        });

        subtitleTextEditor.addEventListener('input', updatePreview);

        // 按钮事件
        applyStyleBtn.addEventListener('click', applyCurrentStyle);
        resetStyleBtn.addEventListener('click', resetCurrentStyle);
        exportBtn.addEventListener('click', exportAssFile);
        resetBtn.addEventListener('click', resetAll);
      }

      // 处理文件选择
      function handleFileSelect(event) {
        const file = event.target.files[0];
        if (file) {
          processAssFile(file);
        }
      }

      // 处理拖拽
      function handleDragOver(event) {
        event.preventDefault();
        assUploadArea.classList.add('dragover');
      }

      function handleDrop(event) {
        event.preventDefault();
        assUploadArea.classList.remove('dragover');
        const file = event.dataTransfer.files[0];
        if (file && file.name.toLowerCase().endsWith('.ass')) {
          processAssFile(file);
        } else {
          showError('请上传有效的ASS字幕文件');
        }
      }

      function handleDragLeave(event) {
        event.preventDefault();
        assUploadArea.classList.remove('dragover');
      }

      // 处理ASS文件
      function processAssFile(file) {
        showStatus('正在解析ASS文件...');
        
        const reader = new FileReader();
        reader.onload = function(e) {
          try {
            const content = e.target.result;
            parseAssFile(content, file);
          } catch (error) {
            showError('文件解析失败: ' + error.message);
          }
        };
        reader.readAsText(file, 'UTF-8');
      }

      // 解析ASS文件
      function parseAssFile(content, file) {
        try {
          assData = content;
          const lines = content.split('\n');
          
          // 解析样式
          styles = {};
          let inStylesSection = false;
          let inEventsSection = false;
          
          // 重置字幕数组
          subtitles = [];
          
          for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            
            if (line === '[V4+ Styles]') {
              inStylesSection = true;
              inEventsSection = false;
              continue;
            }
            
            if (line === '[Events]') {
              inStylesSection = false;
              inEventsSection = true;
              continue;
            }
            
            if (line.startsWith('[') && line.endsWith(']')) {
              inStylesSection = false;
              inEventsSection = false;
              continue;
            }
            
            // 解析样式
            if (inStylesSection && line.startsWith('Style:')) {
              const styleData = line.substring(6).split(',');
              if (styleData.length >= 23) {
                const styleName = styleData[0].trim();
                styles[styleName] = {
                  name: styleName,
                  fontName: styleData[1],
                  fontSize: parseInt(styleData[2]),
                  primaryColor: styleData[3],
                  secondaryColor: styleData[4],
                  outlineColor: styleData[5],
                  shadowColor: styleData[6],
                  bold: parseInt(styleData[7]),
                  italic: parseInt(styleData[8]),
                  underline: parseInt(styleData[9]),
                  strikeout: parseInt(styleData[10]),
                  outline: parseFloat(styleData[20]),
                  shadow: parseFloat(styleData[21])
                };
              }
            }
            
            // 解析对话
            if (inEventsSection && line.startsWith('Dialogue:')) {
              const dialogData = line.substring(9).split(',');
              if (dialogData.length >= 10) {
                const startTime = dialogData[1].trim();
                const endTime = dialogData[2].trim();
                const styleName = dialogData[3].trim();
                const text = dialogData.slice(9).join(',').trim();
                
                subtitles.push({
                  startTime,
                  endTime,
                  styleName,
                  text,
                  originalText: text,
                  customStyle: null
                });
              }
            }
          }
          
          // 显示文件信息
          document.getElementById('assFileName').textContent = `文件名: ${file.name}`;
          document.getElementById('assFileSize').textContent = `文件大小: ${(file.size / 1024).toFixed(2)} KB`;
          document.getElementById('assLineCount').textContent = `字幕条数: ${subtitles.length}`;
          document.getElementById('assStyleCount').textContent = `样式数量: ${Object.keys(styles).length}`;
          
          assInfo.style.display = 'block';
          
          // 显示编辑器
          renderSubtitleList();
          editorContainer.style.display = 'block';
          exportBtn.style.display = 'inline-block';
          
          showStatus(`成功加载 ${subtitles.length} 条字幕，${Object.keys(styles).length} 个样式`);
          
        } catch (error) {
          showError('ASS文件解析失败: ' + error.message);
        }
      }

      // 渲染字幕列表
      function renderSubtitleList() {
        subtitleList.innerHTML = '';
        
        subtitles.forEach((subtitle, index) => {
          const item = document.createElement('div');
          item.className = 'subtitle-item';
          item.innerHTML = `
            <div class="subtitle-time">${subtitle.startTime} → ${subtitle.endTime}</div>
            <div class="subtitle-text">${cleanAssText(subtitle.text)}</div>
            <div class="subtitle-preview" style="margin-top: 10px; padding: 10px; background: #000; border-radius: 8px; min-height: 40px; display: flex; align-items: center; justify-content: center;">
              <span style="${getPreviewStyle(subtitle)}">${cleanAssText(subtitle.text)}</span>
            </div>
          `;
          
          item.addEventListener('click', () => selectSubtitle(index));
          subtitleList.appendChild(item);
        });
      }

      // 选择字幕
      function selectSubtitle(index) {
        currentSubtitleIndex = index;
        
        // 更新选中状态
        document.querySelectorAll('.subtitle-item').forEach((item, i) => {
          item.classList.toggle('active', i === index);
        });
        
        // 加载字幕到编辑器
        const subtitle = subtitles[index];
        const style = subtitle.customStyle || styles[subtitle.styleName] || {};
        const effects = subtitle.effects || {};
        
        subtitleTextEditor.value = cleanAssText(subtitle.text);
        fontName.value = style.fontName || 'Arial';
        fontSize.value = style.fontSize || 24;
        fontSizeValue.textContent = fontSize.value;
        
        // 颜色转换
        primaryColor.value = convertAssColorToHex(style.primaryColor) || '#ffffff';
        secondaryColor.value = convertAssColorToHex(style.secondaryColor) || '#ff0000';
        outlineColor.value = convertAssColorToHex(style.outlineColor) || '#000000';
        shadowColor.value = convertAssColorToHex(style.shadowColor) || '#808080';
        
        bold.value = style.bold || 0;
        italic.value = style.italic || 0;
        underline.value = style.underline || 0;
        strikeout.value = style.strikeout || 0;
        outline.value = style.outline || 2;
        outlineValue.textContent = outline.value;
        shadow.value = style.shadow || 2;
        shadowValue.textContent = shadow.value;
        
        // 加载特效参数
        moveEffect.value = effects.moveType || 'none';
        moveControls.style.display = moveEffect.value !== 'none' ? 'block' : 'none';
        moveParams.value = effects.moveParams || '';
        
        fadeEffect.value = effects.fadeType || 'none';
        fadeControls.style.display = fadeEffect.value !== 'none' ? 'block' : 'none';
        fadeParams.value = effects.fadeParams || '';
        
        scaleX.value = effects.scaleX || 100;
        scaleXValue.textContent = scaleX.value;
        scaleY.value = effects.scaleY || 100;
        scaleYValue.textContent = scaleY.value;
        
        rotateX.value = effects.rotateX || 0;
        rotateXValue.textContent = rotateX.value;
        rotateY.value = effects.rotateY || 0;
        rotateYValue.textContent = rotateY.value;
        rotateZ.value = effects.rotateZ || 0;
        rotateZValue.textContent = rotateZ.value;
        
        karaokeEffect.value = effects.karaokeType || 'none';
        karaokeControls.style.display = karaokeEffect.value !== 'none' ? 'block' : 'none';
        karaokeTime.value = effects.karaokeTime || 1000;
        
        blurEffect.value = effects.blur || 0;
        blurValue.textContent = blurEffect.value;
        alphaEffect.value = effects.alpha || 0;
        alphaValue.textContent = alphaEffect.value;
        
        clipEffect.value = effects.clipType || 'none';
        clipControls.style.display = clipEffect.value !== 'none' ? 'block' : 'none';
        clipParams.value = effects.clipParams || '';
        
        drawingMode.value = effects.drawingMode || '0';
        drawingControls.style.display = drawingMode.value === '1' ? 'block' : 'none';
        drawingCommands.value = effects.drawingCommands || '';
        
        updatePreview();
      }

      // 更新预览
      function updatePreview() {
        if (currentSubtitleIndex === -1) return;
        
        let text = subtitleTextEditor.value || '预览文本';
        
        // 基础样式
        const style = {
          fontFamily: fontName.value || 'Arial',
          fontSize: fontSize.value + 'px',
          color: primaryColor.value,
          fontWeight: bold.value === '1' ? 'bold' : 'normal',
          fontStyle: italic.value === '1' ? 'italic' : 'normal',
          textDecoration: (underline.value === '1' ? 'underline ' : '') + (strikeout.value === '1' ? 'line-through' : ''),
          textShadow: `${shadow.value}px ${shadow.value}px 0px ${shadowColor.value}`,
          WebkitTextStroke: `${outline.value}px ${outlineColor.value}`
        };
        
        // 特效样式
        let transform = '';
        
        // 缩放效果
        const scaleXVal = scaleX.value / 100;
        const scaleYVal = scaleY.value / 100;
        if (scaleXVal !== 1 || scaleYVal !== 1) {
          transform += `scale(${scaleXVal}, ${scaleYVal}) `;
        }
        
        // 旋转效果
        if (rotateX.value != 0) transform += `rotateX(${rotateX.value}deg) `;
        if (rotateY.value != 0) transform += `rotateY(${rotateY.value}deg) `;
        if (rotateZ.value != 0) transform += `rotateZ(${rotateZ.value}deg) `;
        
        style.transform = transform;
        
        // 模糊效果
        if (blurEffect.value > 0) {
          style.filter = `blur(${blurEffect.value}px)`;
        }
        
        // 透明度效果
        if (alphaEffect.value > 0) {
          style.opacity = (255 - alphaEffect.value) / 255;
        }
        
        // 卡拉OK效果预览
        if (karaokeEffect.value !== 'none') {
          text = `🎤 ${text}`;
        }
        
        // 绘制模式预览
        if (drawingMode.value === '1') {
          text = `📐 ${text}`;
        }
        
        previewText.textContent = text;
        Object.assign(previewText.style, style);
      }

      // 应用当前样式
      function applyCurrentStyle() {
        if (currentSubtitleIndex === -1) {
          showError('请先选择要编辑的字幕');
          return;
        }
        
        const subtitle = subtitles[currentSubtitleIndex];
        
        // 更新文本
        subtitle.text = subtitleTextEditor.value;
        
        // 创建自定义样式
        subtitle.customStyle = {
          fontName: fontName.value,
          fontSize: parseInt(fontSize.value),
          primaryColor: convertHexToAssColor(primaryColor.value),
          secondaryColor: convertHexToAssColor(secondaryColor.value),
          outlineColor: convertHexToAssColor(outlineColor.value),
          shadowColor: convertHexToAssColor(shadowColor.value),
          bold: parseInt(bold.value),
          italic: parseInt(italic.value),
          underline: parseInt(underline.value),
          strikeout: parseInt(strikeout.value),
          outline: parseFloat(outline.value),
          shadow: parseFloat(shadow.value)
        };
        
        // 保存特效参数
        subtitle.effects = {
          moveType: moveEffect.value,
          moveParams: moveParams.value,
          fadeType: fadeEffect.value,
          fadeParams: fadeParams.value,
          scaleX: parseInt(scaleX.value),
          scaleY: parseInt(scaleY.value),
          rotateX: parseInt(rotateX.value),
          rotateY: parseInt(rotateY.value),
          rotateZ: parseInt(rotateZ.value),
          karaokeType: karaokeEffect.value,
          karaokeTime: parseInt(karaokeTime.value),
          blur: parseFloat(blurEffect.value),
          alpha: parseInt(alphaEffect.value),
          clipType: clipEffect.value,
          clipParams: clipParams.value,
          drawingMode: drawingMode.value,
          drawingCommands: drawingCommands.value
        };
        
        // 重新渲染列表
        renderSubtitleList();
        selectSubtitle(currentSubtitleIndex);
        
        showStatus('样式已应用到当前字幕');
      }

      // 重置当前样式
      function resetCurrentStyle() {
        if (currentSubtitleIndex === -1) {
          showError('请先选择要重置的字幕');
          return;
        }
        
        const subtitle = subtitles[currentSubtitleIndex];
        subtitle.text = subtitle.originalText;
        subtitle.customStyle = null;
        
        // 重新选择以刷新编辑器
        selectSubtitle(currentSubtitleIndex);
        renderSubtitleList();
        
        showStatus('样式已重置为原始样式');
      }

      // 导出ASS文件
      function exportAssFile() {
        if (!assData) {
          showError('没有可导出的数据');
          return;
        }
        
        try {
          let output = assData;
          
          // 替换对话行
          const lines = output.split('\n');
          let inEventsSection = false;
          let dialogueIndex = 0;
          
          for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            
            if (line === '[Events]') {
              inEventsSection = true;
              continue;
            }
            
            if (line.startsWith('[') && line.endsWith(']')) {
              inEventsSection = false;
              continue;
            }
            
            if (inEventsSection && line.startsWith('Dialogue:') && dialogueIndex < subtitles.length) {
              const subtitle = subtitles[dialogueIndex];
              const dialogData = line.substring(9).split(',');
              
              // 如果有自定义样式，创建新的样式名
              if (subtitle.customStyle) {
                const customStyleName = `Custom_${dialogueIndex}`;
                dialogData[3] = customStyleName;
              }
              
              // 更新文本
              dialogData[9] = subtitle.text;
              
              lines[i] = 'Dialogue:' + dialogData.join(',');
              dialogueIndex++;
            }
          }
          
          // 添加自定义样式到样式部分
          let stylesEndIndex = -1;
          for (let i = 0; i < lines.length; i++) {
            if (lines[i].trim() === '[Events]') {
              stylesEndIndex = i;
              break;
            }
          }
          
          if (stylesEndIndex > -1) {
            const customStyles = [];
            subtitles.forEach((subtitle, index) => {
              if (subtitle.customStyle) {
                const style = subtitle.customStyle;
                const styleLine = `Style: Custom_${index},${style.fontName},${style.fontSize},${style.primaryColor},${style.secondaryColor},${style.outlineColor},${style.shadowColor},${style.bold},${style.italic},${style.underline},${style.strikeout},100,100,0,0,1,${style.outline},${style.shadow},2,10,10,10,1`;
                customStyles.push(styleLine);
              }
            });
            
            if (customStyles.length > 0) {
              lines.splice(stylesEndIndex, 0, ...customStyles);
            }
          }
          
          output = lines.join('\n');
          
          // 下载文件
          const blob = new Blob([output], { type: 'text/plain;charset=utf-8' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'edited_subtitle.ass';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
          
          showStatus('ASS文件已导出');
          
        } catch (error) {
          showError('导出失败: ' + error.message);
        }
      }

      // 重置所有
      function resetAll() {
        assData = null;
        currentSubtitleIndex = -1;
        subtitles = [];
        styles = {};
        
        assInfo.style.display = 'none';
        editorContainer.style.display = 'none';
        exportBtn.style.display = 'none';
        
        assInput.value = '';
        subtitleList.innerHTML = '';
        
        clearMessages();
      }

      // 辅助函数
      function cleanAssText(text) {
        return text.replace(/\{[^}]*\}/g, '').trim();
      }

      function getPreviewStyle(subtitle) {
        const style = subtitle.customStyle || styles[subtitle.styleName] || {};
        return `
          font-family: ${style.fontName || 'Arial'};
          font-size: ${style.fontSize || 24}px;
          color: ${convertAssColorToHex(style.primaryColor) || '#ffffff'};
          font-weight: ${style.bold ? 'bold' : 'normal'};
          font-style: ${style.italic ? 'italic' : 'normal'};
          text-decoration: ${(style.underline ? 'underline ' : '') + (style.strikeout ? 'line-through' : '')};
          text-shadow: ${style.shadow || 2}px ${style.shadow || 2}px 0px ${convertAssColorToHex(style.shadowColor) || '#808080'};
          -webkit-text-stroke: ${style.outline || 2}px ${convertAssColorToHex(style.outlineColor) || '#000000'};
        `;
      }

      function convertAssColorToHex(assColor) {
        if (!assColor) return null;
        
        // ASS颜色格式: &H00BBGGRR 或 &HBBGGRR
        let hex = assColor.replace(/&H/i, '').replace(/&/g, '');
        if (hex.length === 8) hex = hex.substring(2); // 移除透明度
        if (hex.length === 6) {
          // BGR to RGB
          const r = hex.substring(4, 6);
          const g = hex.substring(2, 4);
          const b = hex.substring(0, 2);
          return `#${r}${g}${b}`;
        }
        return null;
      }

      function convertHexToAssColor(hexColor) {
        if (!hexColor) return '&H00FFFFFF';
        
        const hex = hexColor.replace('#', '');
        if (hex.length === 6) {
          // RGB to BGR
          const r = hex.substring(0, 2);
          const g = hex.substring(2, 4);
          const b = hex.substring(4, 6);
          return `&H00${b}${g}${r}`.toUpperCase();
        }
        return '&H00FFFFFF';
      }

      function showStatus(message) {
        statusMessage.textContent = message;
        errorMessage.textContent = '';
        setTimeout(() => {
          statusMessage.textContent = '';
        }, 3000);
      }

      function showError(message) {
        errorMessage.textContent = message;
        statusMessage.textContent = '';
        setTimeout(() => {
          errorMessage.textContent = '';
        }, 5000);
      }

      function clearMessages() {
        statusMessage.textContent = '';
        errorMessage.textContent = '';
      }

      // 初始化
      document.addEventListener('DOMContentLoaded', initEventListeners);
    </script>
  </body>
</html>